<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>我的空间</title>
    <th:block th:replace="fragments/ctxPath::ctxPath"></th:block>
    <script type="text/javascript" th:src="@{/bootstrap/js/jquery.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <script th:src="@{/bootstrap/js/AjaxUtil.js}"></script>
    <script th:src="@{/bootstrap/js/JSONUtil.js}"></script>
    <script th:src="@{/bootstrap/js/layopen.js}"></script>
    <link rel="stylesheet" th:href="@{/bootstrap/css/index/index-bg.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/bootstrap/css/index/index-left.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/bootstrap/css/index/index-right.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/bootstrap/font-awesome/css/font-awesome.min.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/bootstrap/css/iconfont/menu/iconfont.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/bootstrap/css/iconfont/vip/iconfont.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/bootstrap/css/index/vip.css}" type="text/css"/>
    <style>


    </style>
</head>
<body>
<div id="container">
    <div class="content_left">
        <!--log and nav area-->
        <div class="left_item log_nav">
            <div class="item_log">
                <div class="log_name">猿粪の日记</div>
                <div class="grand">Lv 1</div>
                <div class="level">暂无头衔</div>
                <!--<div class="log_desc">想起我拖拉机的烟尘喷了那对狗男女一脸, 我很解气</div>-->
            </div>
            <div class="item_nav">
                <ul class="item_ul">
                    <li data-link="index/content" class="item_li active"><a href="javascript:void(0);">
                        <i class="menu-item-icon fa fa-home"></i>首页</a></li>
                    <li data-link="menu/manage_diary" class="item_li"><a href="javascript:void(0);">
                        <span class="menu-item-icon iconfont">&#xe616;</span> 日记</a>
                        <!--<i class="menu-item-icon fa fa-fw fa-tags"></i>日记管理</a>-->
                    </li>
                    <li data-link="index/pagination" class="item_li"><a href="javascript:void(0);">
                        <i class="menu-item-icon fa fa-cog" aria-hidden="true"></i>系统</a></li>
                    <!--逆战抽奖-->
                    <li data-link="index/lottery" class="item_li"><a href="javascript:void(0);">
                        <i class="menu-item-icon fa fa-gift" aria-hidden="true"></i>抽奖</a>
                    </li>
                    <!--<li data-link="index/schedule" class="item_li"><a href="javascript:void(0);">
                        <i class="menu-item-icon fa fa-fw fa-calendar"></i>日程表</a></li>-->
                    <li onclick="layerSearch()" class="item_li"><a href="javascript:void(0);">
                        <i class="menu-item-icon fa fa-search fa-fw"></i>搜索</a>
                    </li>
                    <li data-link="index/about" class="item_li"><a href="javascript:void(0);">
                        <i class="menu-item-icon fa fa-user"></i>关于</a>
                    </li>
                </ul>
            </div>
        </div>
        <!--personal and friendship area-->
        <div class="left_item personal_friendship">
            <div class="item_personal">
                <!--avatar area-->
                <div class="per_avatar">
                    <span class="per_avatar_area">
                        <img class="avatar" alt="兰州"
                             src="http://thirdqq.qlogo.cn/g?b=oidb&k=Pf4r0mHoCWm66OovCfEJnQ&s=100&t=1531640597"/>
                        <span class="avatar_vip">

                        </span>
                    </span>
                </div>
                <!--show username-->
                <div class="per_username">
                    <span class="username">兰州</span>
                </div>
                <!--user description-->
                <div class="per_depict">那一年, 东莞记录了我的爱情</div>
                <!--content sort and grop-->
                <div class="per_group">
                    <div class="group_item">
                        <a href="javascript:void(0);">
                            <span class="item_count">8</span>
                            <span class="group_name">日志</span>
                        </a>
                    </div>
                    <div class="group_item">
                        <a href="javascript:void(0);">
                            <span class="item_count">8</span>
                            <span class="group_name">标签</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="item_friendship">
                <div class="fs_item fs_rss">
                    <span><a href="javascript:void(0);"><i class="fa fa-rss"></i> RSS</a></span>
                </div>
                <!--<div class="fs_item fs_contact">
                    <span class="contact">
                        <a href="javascript:void(0);"><i class="fa fa-fw fa-github"></i> Github</a>
                    </span>
                    <span class="contact">
                        <a href="javascript:void(0);"><i class="fa fa-fw fa-envelope"></i> Email</a>
                    </span>
                </div>
                <div class="fs_item fs_content">
                    <span class="content_title">
                        <a><i class="fa fa-fw fa-link"></i> 友情链接</a>
                    </span>
                    <span class="content_list">
                        <ul class="fs_ul">
                            <li class="fs_li"><a href="javascript:void(0);">友情姐额吉</a></li>
                            <li class="fs_li"><a href="javascript:void(0);">友接姐吉</a></li>
                            <li class="fs_li"><a href="javascript:void(0);">友情链接姐额吉</a></li>
                        </ul>
                    </span>
                </div>-->
            </div>
        </div>
    </div>
    <div class="content_right">
        <div class="right_item item_nav">
            <ul class="nav_ul">
                <li class="nav_li vip"><a href="javascript:void(0);">
                    <i class="fa fa-diamond vip_icon" aria-hidden="true"></i>
                    <span class="vip"> 会员</span></a>
                </li>
                <li class="nav_li switch_theme"><a href="javascript:void(0);">
                    <span class="iconfont">&#xe627;</span> 切换主题</a>
                </li>
                <!--<li class="nav_li manage_diary"><a href="javascript:void(0);">
                    <span class="iconfont">&#xe616;</span> 日记管理</a>
                </li>-->
                <li class="nav_li write_diary">
                    <a href="javascript:void(0);"><span class="iconfont">&#xe6f7;</span> 写日记</a>
                </li>
                <li class="nav_li">
                    <a th:href="@{/signOut}"><i class="fa fa-rebel" aria-hidden="true"></i> 退出</a>
                </li>
            </ul>
        </div>
        <div class="right_item item_content">
            <iframe id="main_page" style="width: 100%;height: 100%;border: none;margin: 0;padding: 0;"
                    th:src="@{/index/home}"></iframe>
        </div>
    </div>
</div>
<div class="stars"></div>
<script>
    var TOKEN = {}, LEVEL = {
        level1: '白纸少年',
        level2: '初出茅庐',
        level3: '资深舔狗',
        level4: '骂街泼妇',
        level5: '墨口喷金',
        level6: '文坛瑰宝',
        level7: '一代宗师',
        level8: '问鼎称雄',
        level9: '返璞归真'
    };

    $(document).ready(function () {
        // 加载背景
        // loadBackgroud();
        // 加载用户身份信息
        loadCurToken();
    });

    function layerSearch() {
        let url = ctxPath + 'menu/search';
        let json = {title: '寻找您的足迹', area: 7, url: url};
        layopen(json, "init", {});
    }

    /*function lottery() {
        let url = ctxPath + 'menu/lottery';
        let json = {title: '恭喜您获得', area: 7, url: url};
        layopen(json, "init", {});
    }*/


    let menu = {'vip': '开通VIP', 'manage_diary': '日记管理', 'write_diary': '写日记'};
    $("#container .content_right .item_nav .nav_ul .nav_li").on('click', function () {
        for (let menuKey in menu) {
            if ($(this).hasClass(menuKey)) {
                let url = ctxPath + 'menu/' + menuKey;
                let json = {title: menu[menuKey], area: 7, url: url};
                if (menuKey === 'manage_diary' || menuKey === 'write_diary') {
                    layopen(json, "init", {}, function () {
                        refreshList();
                    }, false);
                } else {
                    layopen(json, "init", {});
                }
                break;
            }
        }
    });

    /**
     * 加载用户其他信息
     */
    function setCurUserInfo(token) {
        let grade = token.grade;
        if (grade) {
            let key = 'level' + grade;
            let call = LEVEL[key];
            if (parseInt(grade) > 0) {
                $('#container .content_left .left_item .item_log').addClass('level');
                $("#container .content_left .left_item .item_log .level").addClass(key).text(call);
            }
            $("#container .content_left .left_item .item_log .grand").text('LV ' + grade);
        }
    }

    /**
     * 加载当前用户Token
     */
    function loadCurToken() {
        let url = ctxPath + "getToken", json = {};
        AjaxPost(url, json, function () {
        }, function (result) {
            result = JSONUtil.parseObj(result);
            if (parseInt(result.code) === 200) {
                TOKEN = result.data;
                if (Object.keys(TOKEN).length > 0) {
                    $(".avatar").attr("alt", TOKEN.username).attr("src", TOKEN.avatar);
                    if (parseInt(TOKEN.vip) !== 0) {
                        let vipHtml = '';
                        switch (TOKEN.vip + '') {
                            case '1':
                                vipHtml = '<span class="iconfont" style="font-size: 36px;">&#xe7a3;</span>';
                                break;
                            case '2':
                                vipHtml = '<span class="iconfont" style="font-size: 36px;">&#xe7a5;</span>';
                                break;
                            case '3':
                                vipHtml = '<span class="iconfont" style="font-size: 36px;">&#xe7ad;</span>';
                                break;
                            case '4':
                                vipHtml = '<span class="iconfont" style="font-size: 36px;">&#xe7a7;</span>';
                                $(".username").addClass('vip4-shadow');
                                $(".per_avatar_area").addClass(('vip' + TOKEN.vip));
                                break;
                        }
                        $(".avatar_vip").html(vipHtml).addClass(('vip' + TOKEN.vip + 'color'));
                        if ((TOKEN.vip + '') !== '4') {
                            $(".username").addClass(('vip' + TOKEN.vip));
                        }
                    }
                    $(".username").text(TOKEN.username).attr("alt", TOKEN.username);
                    setCurUserInfo(TOKEN);
                }
            } else {
                console.log("获取当前登入用户异常哦, 请检查你的参数捏!");
            }
        });
    }

    /**
     * 导航栏
     */
    $("#container .content_left .left_item .item_nav .item_ul .item_li").on('click', function () {
        if ($(this).hasClass("active")) {
            return;
        }
        let href = $(this).data('link');
        if (href) {
            loadHref(href);
            $(this).addClass("active").siblings().removeClass("active");
        }
    });


    /**
     * 定义页面跳转捏(单页面跳转主要逻辑)
     * @param href
     */
    function loadHref(href) {
        $("#main_page").attr('src', ctxPath + href);
    }

    /**
     * 刷新日记列表
     */
    function refreshList() {
        let obj = $('#main_page').prop('contentWindow');
        obj['init']();
    }




    /**
     * 加载背景
     */
    function loadBackgroud() {
        var stars = 1000;
        var $stars = $(".stars");
        var r = 800;
        for (var i = 0; i < stars; i++) {
            var $star = $("<div/>").addClass("star");
            $stars.append($star);
        }
        $(".star").each(function () {
            var cur = $(this);
            var s = 0.2 + (Math.random() * 1);
            var curR = r + (Math.random() * 300);
            cur.css({
                transformOrigin: "0 0 " + curR + "px",
                transform: " translate3d(0,0,-" + curR + "px) rotateY(" + (Math.random() * 360) + "deg) rotateX(" + (Math.random() * -50) + "deg) scale(" + s + "," + s + ")"
            })
        })
    }

</script>
</body>
</html>